<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="./js/echarts.js" type="text/javascript"></script>
    <script type="text/javascript">
        $().ready(function () {
            $("#test").width("800px");
            $("#test").height("600px");
            var myChart = echarts.init(document.getElementById('test'));
            var option;
            $.ajax({
                url: window.location.href + "getData",
                type: "get",
                dataType: "json",
                success: function (result) {
                    $("#data").append("<p>" + JSON.stringify(result) + "</p>");
                    option = {
                        title: {
                            text: '某站点用户访问来源',
                            subtext: '纯属虚构',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '50%',
                                data: result,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                },
                error: function () {
                    alert("bad");
                }
            });
            $("#echartsBtn").on("click", function () {
                option && myChart.setOption(option);
                if ($("#echartsBtn").text() === "显示eCharts") {
                    $("#echartsBtn").text("隐藏eCharts");
                    $("#test").toggle();
                } else {
                    $("#echartsBtn").text("显示eCharts");
                    $("#test").toggle();
                }
            });
            $("#dataBtn").on("click", function () {
                if ($("#dataBtn").text() === "显示数据源") {
                    $("#dataBtn").text("隐藏数据源");
                    $("#data").toggle();
                } else {
                    $("#dataBtn").text("显示数据源");
                    $("#data").toggle();
                }
            })
        });
    </script>
</head>
<body>
<button id="echartsBtn">显示eCharts</button>
<button id="dataBtn">显示数据源</button>
<div id="test" hidden></div>
<div id="data" hidden></div>
</body>
</html>